<template>
  <!-- 一个.vue文件就是一个组件, 一个项目中只有一个根组件 App.vue -->
  <!-- 一个.vue文件内部一般是由三部分组成: template , script , style -->
  <!-- template 内部写标签 , 只能有一个根元素 -->
  <!-- script 内部写js逻辑 , 内部需要 export default {}, 所有的js代码都需要写在这里 -->
  <!-- style 内部写css样式 , 可以通过lang='xx'指定style内部的css语法 , 可以通过设置 scoped 属性 让多个.vue文件之间的样式互不影响 -->
  <div id="app">
    <!-- 搜索框 -->
    <Search></Search>
    <!-- <Search/> -->

    <!-- 轮播图 -->
    <Swiper></Swiper>

    <!-- 列表 -->
    <List></List>

    <!-- Tabbar -->
    <Tabbar></Tabbar>

  </div>
</template>

<script>
// 导入组件
import Search from './components/Search.vue'
import Swiper from './components/Swiper.vue'
import List from './components/List.vue'
import Tabbar from './components/Tabbar.vue'
export default {
  components:{//负责注册组件（局部组件，只能在当前注册的文件中使用）
  // "Search":Search
  // Search
  Swiper,
  List,
  Tabbar,

  }
}
</script>

<style lang="scss">
// 这里不加scoped,因为，这里一般写全局样式
*{
  margin: 0;
  padding: 0;
}
body{
  padding-bottom: 50px;
}

</style>
